<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>直播聊天记录审核</title>
    <link rel='stylesheet' href='/Public/css/bootstrap/bootstrap.min.css' />
    <link rel='stylesheet' href='/Public/css/admin/font-awesome.min.css' />
    <link rel='stylesheet' href='/Public/css/live/recording_new.css' />
    <link rel='stylesheet' href="/Public/css/live/video-js.css" rel="stylesheet">
</head>
<body>

<section class="sec-video-info">
    <div class="div-video-bar">
        <p class="p-txt">在线人数 <span id="userNum"></span></p>
        <p class="p-play-time">超管</p>
    </div>
</section>

<section class="sec-comments">
    <div class="div-talk">
        <div class="form-group">
            <div class="col-sm-12">
                <div id="message" class="form-control" style="height:500px; overflow:scroll;overflow-x:hidden;border:0px ">
                    <span class="msg"></span>
                </div>
            </div>
            <div class="form-group">
                <input type="text" class="form-control div-say" id="input" placeholder="请输入要发送的内容">
                <button type="button" class="btn btn-success" id="sub">发 送</button>
            </div>
        </div>
    </div>
</section>
<div id="praise-div"></div>
</body>
<script src="/Public/js/jquery-3.1.1.min.js" charset="utf-8"></script>
<script src="/Public/js/common/baidutongji.js"></script>
<script>
    $(function(){
        var wsServer = 'ws://112.124.32.115:7000';
        //var wsServer = 'ws://127.0.0.1:7000';
        var ws = new WebSocket(wsServer);
        var isConnect = false;
        ws.onopen = function (evt) { onOpen(evt) };
        ws.onclose = function (evt) { onClose(evt) };
        ws.onmessage = function (evt) { onMessage(evt) };
        ws.onerror = function (evt) { onError(evt) };
        function onOpen(evt) {
            //alert("连接服务器成功");
            //console.log("连接服务器成功");
            isConnect = true;
        }
        function onClose(evt) {
            //console.log("Disconnected");
            //alert('disconnected');
        }
        function onMessage(evt) {
            var data = eval("("+evt.data+")");
            //var data = JSON.parse(evt.data);
            //alert(data.type);
            switch (data.type) {
                case 'text':
                    addMsg(data.msg);
                    break;
                case 'num' :
                    updataUserNum(data.msg);
                    break;
            }
            //console.log('Retrieved data from server: ' + evt.data);
        }
        function onError(evt) {
            //console.log('Error occured: ' + evt.data);
            if(typeof(evt.data) == 'undefined'){
                //alert("刷新太猛烈");
            }
            //alert('error');
        }
        function sendMsg() {
            if(!$('#openid').val() || $('#openid').val() == ' '){
                // location.href="/Wap/Live/wxLogin";
                // return false;
            }
            if(!$('#input').val() || $('#input').val() == ' '){
                alert("请输入要发送的内容");
                return false;
            }
            if($('#input').val().length > 25){
                alert("内容长度不得超过25个字");
                return false;
            }
            if(isConnect){
                //ws.send('<span class="msg msg-'+countMsg+'" data-num="'+countMsg+'" style="color:#5CB85C;">'+$('#nickname').text()+'：</span>'+$('#input').val());
                var num = Math.floor(Math.random()*100000+1);
                ws.send('<div class="item praise-inactive praise-'+num+'" data-num="'+num+'"><div class="tag" style="background-color:orange"></div><div class="name-msg"><span class="name" style="color:orange">超管：</span><span class="msg" style="color:orange">'+$('#input').val()+'</span></div></div>');
                $('#input').val('');
            }
        }

        function sendPraise() {
            if(!$('#openid').val() || $('#openid').val() == ' '){
                // location.href="/Wap/Live/wxLogin";
                // return false;
            }
            if(isConnect){
                var num = Math.floor(Math.random() * 3 + 1);
                ws.send('<span style="color:#5CB85C;">'+$('#nickname').text()+'：</span>送出一个赞！<img class="praise-heart" src="/Public/images/live/'+num+'.png">');
            }
        }

        $("#message").on("click", ".praise-inactive", function(){
            if(!confirm("确定删除吗？")) return false;
            var num = $(this).data("num");
            ws.send('<span class="msg-none">'+num+'</span>');
        })

        function addMsg(msg) {
            msg = JSON.parse(msg);
            var text = msg.text;
            if(typeof(text) != 'undefined' && text != 'null'){
                $('#message').append(text);
                var scrollHeight = $('#message')[0].scrollHeight;
                $('#message').scrollTop(scrollHeight);
                //praiseHeart();
            }
        }

        function updataUserNum(msg) {
            $('#userNum').html(msg);
            var countNoneMsg = $(".msg-none:last").text();
            if(countNoneMsg){
                $(".praise-"+countNoneMsg).addClass("msg-none");
            }
        }

        $("#sub").on("click",function(){
            sendMsg();
        })
    })
</script>
</html>
